// react-redux里面有了两个hooks，useSelector用来映射state的，useDispatch用来映射dispatch的
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";

const Index = () => {
  // useSelector要传入一个回调函数
  // 具有响应式的
  // 取数据的时候要加一个模块名
  const count = useSelector((state) => state.city.count);
  const list = useSelector((state) => state.city.list);
  // useDispatch不需要传参数
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: "takeLoad" });
  }, [dispatch]);

  return (
    <>
      <div>这是城市选择页</div>
      <button onClick={() => dispatch({ type: "takeminus" })}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: "takeadd" })}>+</button>

      <ul>
        {list.map((item) => (
          <li key={item._id}>{item.nm}</li>
        ))}
      </ul>
    </>
  );
};

export default Index;
